<template>
	<view class="container">
		<view class="order-info-container">
			<view class="fourth-remark-card">
				<view class="card-remark-area"><textarea class="text-area" v-model="sign" placeholder="请填写您的个性签名吧" maxlength="30" /></view>
			</view>
		</view>
		<view class="confirm-btn bottom-change-view" @click="saveServerPlayer()">保存</view>
	</view>
</template>

<script>
import { successToShow } from '@/config/common.js';
import { updateServePlayer } from '@/constant/schedule.js';

export default {
	components: {},
	data() {
		return {
			sign: '',
			submitUploadStatus: false
		};
	},
	onLoad: function(option) {
		if (option.sign) {
			this.sign = JSON.parse(decodeURIComponent(option.sign));
		}
	},
	methods: {
		async saveServerPlayer() {
			let userInfo = JSON.parse(uni.getStorageSync('ServePlayer_UserInfo'));
			userInfo.Sign = this.sign;
			await updateServePlayer(userInfo);
			uni.setStorageSync('ServePlayer_UserInfo', JSON.stringify(userInfo));
			successToShow('保存成功', res => {
				uni.navigateBack();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	overflow-y: auto;
	background-color: $main-page-color;
	height: 100vh;
}

.order-info-container {
	padding-right: 30rpx;
	padding-left: 30rpx;
	padding-bottom: 120rpx;
	font-size: $main-text-size-32;
	padding-top: 20rpx;
	.top-customer-card {
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.fourth-remark-card {
		padding: 40rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
}

.card-title {
	color: $main-text-color-gray-33;
	font-size: $main-text-size-32;
	margin-bottom: 20rpx;
}

.card-remark-area {
	width: 100%;

	.text-area {
		border: 2rpx dashed $main-line-color-gray-DE;
		height: 140rpx;
		width: calc(100% - 20rpx);
		font-size: $main-text-size-28;
		padding: 10rpx;
	}
}

.confirm-btn {
	position: fixed;
	bottom: 0;
	font-size: $main-text-size-32;
	color: #fff;
	width: 100vw;
	line-height: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
